<template>
  <view class="circle-info">
    <view class="fl">
      <view style="overflow: hidden;">
        <view class="circle-title">{{ circle.name }}</view>
        <view class="circle-vip" v-show="isVip"></view>
      </view>
      <view class="circle-color">{{ circle.car_shop_name }}</view>
    </view>
    <view class="fr" v-if="showFollow">
      <van-button
        v-if="!isFollow"
        icon="plus"
        plain="true"
        type="info"
        color="#006CFF"
        size="mini"
        @tap="follow"
      >
        关注
      </van-button>
      <van-button type="info" color="#999" size="mini" :disabled="true" v-else>
        已关注
      </van-button>
    </view>
  </view>
</template>

<script>
import { toast } from '@utils/index'
import { follow } from '@requests/circle'
export default {
  name: 'CircleInfo',
  props: {
    circle: {
      type: Object,
      default: () => {}
    },
    showFollow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      followed: false
    }
  },
  computed: {
    isFollow() {
      return this.circle.is_follow || this.followed
    },
    isVip() {
      return this.circle.vip_level !== 0 ? true : false
    }
  },
  methods: {
    follow() {
      follow(this.circle.user_id).then(res => {
        this.followed = true
        toast.success('关注成功')
      })
    }
  }
}
</script>

<style>
.circle-info {
  overflow: hidden;
  height: 100rpx;
}
.fl {
  float: left;
}
.fr {
  float: right;
  margin-top: 26rpx;
}
.circle-title {
  float: left;
  font-size: 32rpx;
  font-weight: bold;
}
.circle-color {
  display: block;
  font-size: 28rpx;
  color: #999;
  margin: 10rpx 0;
}
.circle-vip {
  display: inline-block;
  width: 90px;
  height: 36px;
  background: url('https://yiche-static.oss-cn-hangzhou.aliyuncs.com/ycsk/vip_img.png')
    bottom center no-repeat;
  margin-left: 10rpx;
  background-size: cover;
  vertical-align: middle;
}
</style>
